<template>
	<view class="login">
		<view class="login_top_img_box">
			<image class="login_top_img" :src="onlinePic+'login_img.png'" mode="widthFix"></image>
		</view>
		<view class="login_bottom_box" :style="safeBottom?'top: 55%;':'top: 62%;'">
			<view class="login_bottom">
				<view v-if="hasPhone" class="login_mobile_btn_black" @click="wxLogin">
					<image class="login_icon" :src="onlinePic+'login_icon.png'"></image>
					<view class="ml-10">一键授权登录</view>
				</view>
				<view v-else>
					<!-- <button v-if="isAgree" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						<view class="login_mobile_btn_black">
							<image class="login_icon" :src="onlinePic+'login_icon.png'"></image>
							<view class="ml-10">一键授权登录</view>
						</view>
					</button> -->
					<button v-if="isAgree" open-type="getPhoneNumber" @click="clickGetPhone"
						@getphonenumber="getPhoneNumber">
						<image class="login_icon" :src="onlinePic+'login_icon.png'"></image>
						<view class="ml-10">一键授权登录</view>
					</button>
					<view v-else class="login_mobile_btn_black" @click="wxLogin">
						<image class="login_icon" :src="onlinePic+'login_icon.png'"></image>
						<view class="ml-10">一键授权登录</view>
					</view>
				</view>
				<view class="login_mobile_btn" @click="closeLogin">
					<view class="ml-5">暂不登录</view>
				</view>
				<view class="agremment_box">
					<image @click="changeCheckbox" v-if="isAgree" class="login_checkbox"
						:src="onlinePic+'checkbox_on.png'"></image>
					<image @click="changeCheckbox" v-else class="login_checkbox" :src="onlinePic+'checkbox.png'">
					</image>
					<span @click="changeCheckbox" class="agremment_text">我已阅读并同意</span>
					<span @click="goAgreement(21)" class="agremment_text" style="color: #33a1ff;">《个人隐私政策》</span>
					<span @click="goAgreement(22)" class="agremment_text" style="color: #33a1ff;">《用户使用协议》</span>
					<span @click="changeCheckbox" class="agremment_text">并同意向中国境内的第三方提供我的个人信息</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userLogin,
		clubPhoneLogin,
		getGroupUserInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				user_id: '',
				userinfo: '',
				isSubmit: true,
				isAgree: false,
				hasPhone: false,
				access_token: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				safeBottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? true : false
			};
		},
		onShow() {

		},
		onLoad() {
			uni.removeStorage({
				key: 'access_token'
			})
			uni.removeStorage({
				key: 'userinfo'
			})
			var params = {
				event_code: '登录',
				path: 'pages/login/login',
				event_id: '',
				title: '',
				source_page: '进入登录页面',
				value: '',
			}
			app.BurialPoint(params)
			var that = this
			uni.login({
				success: function(loginRes) {
					console.log('login-res==↓↓↓↓')
					console.log(loginRes)
					var params = {
						event_code: '登录',
						path: 'pages/login/login',
						event_id: '',
						title: '',
						source_page: '登录-login授权' + loginRes.errMsg,
						value: '',
					}
					app.BurialPoint(params)
					if (uni.getStorageSync('Appoptions').query) {
						var params = {
							code: loginRes.code,
							//来源:富士范儿：fushifans；斯巴鲁官网：subaru-web；SNS:sns;素材库：dmc
							register_channel: uni.getStorageSync('Appoptions').query.register_channel ? uni
								.getStorageSync('Appoptions').query.register_channel : '',
							invitation_id: uni.getStorageSync('InvitationId') ? uni.getStorageSync(
								'InvitationId') : '', //分享人id
						}
					} else {
						var params = {
							code: loginRes.code,
						}
					}

					userLogin(params).then(res => {
						if (res.state == 1) {
							that.user_id = res.data.user.id
							that.hasPhone = res.data.user.mobile ? true : false
							that.access_token = res.data.access_token
							var params = {
								event_code: '登录',
								path: 'pages/login/login',
								event_id: '',
								title: '',
								source_page: '登录-登录成功',
								value: '',
							}
							app.BurialPoint(params)
						} else {

							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
				},

			})

		},
		methods: {
			wxLogin() {
				var that = this
				var params = {
					event_code: '登录',
					path: 'pages/login/login',
					event_id: '',
					title: '',
					source_page: '登录-点击wxLogin',
					value: '',
				}
				app.BurialPoint(params)
				if (that.isAgree) {
					var params = {
						event_code: '登录',
						path: 'pages/login/login',
						event_id: '',
						title: '',
						source_page: '登录-点击wxLogin-isAgree=true',
						value: '',
					}
					app.BurialPoint(params)
					uni.setStorage({
						key: 'access_token',
						data: that.access_token,
						success: function() {
							that.getGroupUserInfo()
						}
					});
				} else {
					var params = {
						event_code: '登录',
						path: 'pages/login/login',
						event_id: '',
						title: '',
						source_page: '登录-点击wxLogin-isAgree=false',
						value: '',
					}
					app.BurialPoint(params)
					uni.showToast({
						title: '请阅读并同意《个人隐私政策》《用户使用协议》',
						icon: 'none'
					})
				}
			},
			clickGetPhone() {
				var params = {
					event_code: '登录',
					path: 'pages/login/login',
					event_id: '',
					title: '',
					source_page: '登录-点击授权手机号-getPhoneNumber',
					value: '',
				}
				app.BurialPoint(params)
			},
			getPhoneNumber(e) {
				var that = this
				console.log('getPhoneNumber==↓↓↓↓')
				console.log(e)
				var params = {
					event_code: '登录',
					path: 'pages/login/login',
					event_id: '',
					title: '',
					source_page: '登录-获取到手机号' + e.detail.errMsg,
					value: '',
				}
				app.BurialPoint(params)
				if (e.detail.code) {
					var params = {
						event_code: '登录',
						path: 'pages/login/login',
						event_id: '',
						title: '',
						source_page: '登录-获取到手机号code',
						value: '',
					}
					app.BurialPoint(params)
					uni.setStorage({
						key: 'access_token',
						data: that.access_token,
						success: function() {
							var phoneCode = e.detail.code
							if (that.isAgree) {
								setTimeout(function() {
									clubPhoneLogin({
										code: phoneCode,
										user_id: that.user_id
									}).then(res => {
										if (res.state == 1) {
											console.log('wechatPhone==↓↓↓↓')
											console.log(res)
											var params = {
												event_code: '登录',
												path: 'pages/login/login',
												event_id: '',
												title: '',
												source_page: '登录-获取到手机号mini-phone-new接口调用成功',
												value: '',
											}
											app.BurialPoint(params)
											that.getGroupUserInfo()
										} else {
											console.log(res.error)
											var params = {
												event_code: '登录',
												path: 'pages/login/login',
												event_id: '',
												title: '',
												source_page: '登录-获取到手机号mini-phone-new接口调用失败',
												value: '',
											}
											app.BurialPoint(params)
											uni.showToast({
												title: res.error[0],
												mask: true,
												icon: 'none',
												duration: 1500
											})
											uni.removeStorage({
												key: 'access_token'
											})
										}
									})
								}, 100)
							} else {
								uni.showToast({
									title: '请阅读并同意《个人隐私政策》《用户使用协议》',
									icon: 'none'
								})
							}
						}
					});
				} else {
					var params = {
						event_code: '登录',
						path: 'pages/login/login',
						event_id: that.user_id ? that.user_id : '',
						title: '',
						source_page: '登录-没有获取到手机号code',
						value: '',
					}
					app.BurialPoint(params)
					uni.showToast({
						title: '请授权您的手机号',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					// that.getGroupUserInfo()
					// that.user_id = ''
					// that.hasPhone = false
					// that.access_token = ''
				}
			},

			getGroupUserInfo() {
				var params = {
					event_code: '登录',
					path: 'pages/login/login',
					event_id: '',
					title: '',
					source_page: '授权成功获取用户信息',
					value: '',
				}
				app.BurialPoint(params)
				console.log('this.user_id===' + this.user_id)
				getGroupUserInfo({
					user_id: this.user_id
				}).then(res => {
					if (res.state == 1) {
						var params = {
							event_code: '登录',
							path: 'pages/login/login',
							event_id: '',
							title: '',
							source_page: '授权成功获取用户信息-成功',
							value: '',
						}
						app.BurialPoint(params)
						var info = res.data.list
						uni.setStorage({
							key: 'userinfo',
							data: info,
							success: function() {
								uni.setStorage({
									key: 'indexload',
									data: 'true',
									success() {}
								})
								uni.setStorage({
									key: 'groupload',
									data: 'true',
									success() {}
								})
								uni.setStorage({
									key: 'videoload',
									data: 'true',
									success() {

									}
								})
								uni.setStorage({
									key: 'myload',
									data: 'true',
									success() {}
								})
								uni.setStorage({
									key: 'onload',
									data: 'true',
									success() {
										setTimeout(function() {
											app.getEquipment()
											if (getCurrentPages().length == 1) {
												uni.switchTab({
													url: '/pages/index/index'
												})
											} else {
												uni.navigateBack({
													delta: 1
												})
											}

										}, 500)
									}
								})
							}
						});
					} else {
						var params = {
							event_code: '登录',
							path: 'pages/login/login',
							event_id: '',
							title: '',
							source_page: '授权成功获取用户信息-失败',
							value: '',
						}
						app.BurialPoint(params)
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
						uni.removeStorage({
							key: 'access_token'
						})
					}
				})
			},
			changeCheckbox() {
				this.isAgree = this.isAgree ? false : true
			},
			goAgreement(id) {
				this.isAgree = true
				uni.navigateTo({
					url: '/pages/agreement/agreement?scene=' + id
				})
			},
			closeLogin() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		.login_top_img_box {
			width: 100%;
			position: relative;

			.login_top_img {
				width: 100%;
			}
		}

		.login_bottom_box {
			position: fixed;
			bottom: 0;
			padding: 80rpx 30rpx 0 30rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: #fff;

			.login_btn_img {
				width: 100%;
				height: 90rpx;
				vertical-align: middle;
			}



			.login_mobile_btn {
				width: 100%;
				height: 88rpx;
				color: #191919;
				font-size: 34rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 2rpx;
				border-radius: 8rpx;
				background-color: #ffffff;
				border: 1rpx solid #191919;
			}

			button {
				padding-left: 0 !important;
				padding-right: 0 !important;
				background-color: #191919 !important;
				width: 100%;
				height: 88rpx;
				color: #ffffff;
				font-size: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 2rpx;
				border-radius: 8rpx;
				border: 1rpx solid #191919 !important;
				box-sizing: content-box !important;
			}

			button::after {
				border: 1rpx solid #191919 !important;
			}

			.login_mobile_btn_black {
				width: 100%;
				height: 88rpx;
				color: #ffffff;
				font-size: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 2rpx;
				border-radius: 8rpx;
				background-color: #191919;
				border: 1rpx solid #191919;
			}

			.login_icon {
				width: 26rpx;
				height: 26rpx;
				vertical-align: middle;
			}

			.agremment_box {
				margin-top: 30rpx;

				.login_checkbox {
					width: 26rpx;
					height: 26rpx;
					vertical-align: middle;
				}

				.agremment_text {
					color: #191919;
					font-size: 24rpx;
					margin-left: 10rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>